<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
    <title>任务详情</title>
    <script src="${ctx}/js/jquery1.8.2.min.js"></script>
    <script src="${ctx}/js/vue.min.js"></script>
    <script src="${ctx}/js/changeSize.js"></script>
    <script src="${ctx}/js/NativeShare.js"></script>
    <link rel="stylesheet" href="${ctx}/css/reset.css">
    <script src="${ctx}/layui/layui.all.js"></script>
    <link rel="stylesheet" href="${ctx}/layui/css/layui.mobile.css">
</head>
<style>
    [v-cloak] {
        display: none;
    }

    .task_list {
        padding-bottom: 4.1rem;
    }

    .task_header {
        border-bottom: 0.2rem solid #f5f5f5;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
        height: 2.6rem;
        line-height: 2.6rem;
        font-size: 1rem;
        background: #52A2BD;
        color: #fff;
        z-index: 10;
    }

    .task_header img {
        position: absolute;
        width: 1rem;
        height: 1rem;
        top: 50%;
        transform: translateY(-50%);
        left: 0.5rem;
    }

    .task_box {
        /*position: relative;*/
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.06rem solid rgba(229,229,229,0.3);
        padding-bottom: 0.6rem;
        /*padding: 0.8rem 0.8rem 0.6rem 0.8rem;*/
    }

    .last_num {
        display: flex;
    }

    .last_num img {
        margin-right: 1rem;
        width: 2.8rem;
        height: 2.8rem;
        border-radius: 0.5rem;
    }

    .last_num div {
        padding-top: 0.2rem;
    }

    .title {
        margin-bottom: 0.8rem;
        font-size: 0.9rem;
        font-weight: 400;
        color: #666;
    }

    .describe {
        font-size: 0.75rem;
        color: #ACAEAD;
    }

    .describe i {
        color: #ED3F27;
    }

    .get_money {
        color: #EF514C;
        font-size: 1rem;
        font-weight: 400;
        margin-right: 0.8rem;
        text-align: right;
    }
    .btn_enroll{
        background: url("${ctx}/image/jietu/enrollbtn.png");
        display: inline-block;
        width: 5rem;
        height: 2rem;
        background-repeat: no-repeat;
        background-size: 100%;
        line-height: 1.8rem;
        font-size: 0.7rem;
        text-align: center;
        color: #fff;
        margin-top: 0.2rem;
    }
    .pass_detail {
        position: absolute;
        right: 0rem;
        top: 0rem;
        z-index: 2;
    }

    .pass_detail img {
        width: 4rem;
        height: 4rem;
    }

    .task_intro {
        padding: 0 0.8rem;
        margin-bottom: 0.5rem;
    }

    .task_intro div {
        padding: 0.5rem 1.2rem;
        border-radius: 3rem;
        font-size: 0.8rem;
    }

    .task_intro div p:first-child {
        margin-bottom: 0.5rem;
    }

    .check_status {
        background: #EAF4F7;
        color: #52A2BD;
    }

    .pass_status {
        background: #F3F9F4;
        color: #96CFA3;
    }

    .task_time {
        padding: 0 0.8rem 0.8rem 0.8rem;
        border-bottom: 0.2rem solid rgba(229,229,229,0.3);
        font-size: 0.75rem;
        /*padding-top: 0.6rem;*/
        /*border-top: 1px solid #eae9e9;*/
    }

    .time_box {
        display: flex;
        justify-content: space-around;
        opacity: 0.8;
    }

    .show_border {
        border-top: 1px solid #F5F5F5;;
    }

    .task_time .item {
        display: block;
        text-align: center;
        color: #333;
        font-weight: 400;
        font-size: 0.8rem;
    }

    .task_time .time_box div img {
        width: 0.85rem;
        height: 0.85rem;
        margin-right: 0.2rem;
    }

    .task_time .time_box div p {
        margin-top: 0.5rem;
        color: #999;
        text-align: center;
        font-size: 0.8rem;
    }

    .task_require {
        border-bottom: 0.2rem solid #F5F5F5;
        font-size: 0.8rem;
        padding: 0.8rem;
    }

    .task_require p:first-child {
        margin-bottom: 0.5rem;
    }

    .task_require p:nth-child(n+2) {
        line-height: 1.2rem;
    }

    .task_require i {
        color: #f0361e;
    }

    .front_task p {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.4rem;
    }

    .front_task p:first-child {
        margin-top: 0
    }

    .front_task p span:last-child {
        display: block;
        width: 4rem;
        height: 1.3rem;
        line-height: 1.3rem;
        text-align: center;
        background: #52A2BD;
        color: #fff;
        font-size: 0.7rem;
        border-radius: 5rem;
    }

    .task_step {
        padding: 0.8rem 0.8rem 3rem;
        font-size: 0.8rem;
    }
    .task_step .content_box:last-child  .step_num span{
        border: 0;
    }

    .task_step .tip {
        display: flex;
        justify-content: space-between;
        color: #333;
        margin-bottom: 1rem;
        font-weight: 400;
    }
    .task_step .tip label{
        font-size: 0.6rem;
        padding-left: 0.5rem;
        line-height: 1.2rem;
        color: #ccc;
    }

    .video {
        display: block;
        /*width: 3rem;*/
        /*height: 1.5rem;*/
        /*line-height: 1.5rem;*/
        /*text-align: center;*/
        /*background: #52A2BD;*/
        /*color: #fff;*/
        /*font-size: 0.7rem;*/
        /*border-radius: 5rem;*/
    }

    .content_box {
        position: relative;
        display: flex;
        height: 100%;
        padding-bottom: 1rem;
    }

    .step_num {
        height: 100%;
        margin-right: 1rem;
    }

    .step_num i {
        display: block;
        background: url("${ctx}/image/jietu/circular.png");
        background-size: 100%;
        background-repeat: no-repeat;
        color: #fff;
        font-size: 0.8rem;
        width: 1.5rem;
        height: 1.5rem;
        line-height: 1.5rem;
        text-align: center;
        border-radius: 100%;
        margin-left: -0.3rem;
    }

    .step_num span {
        position: absolute;
        display: block;
        border-left: 1px dashed #FF695D;
        top: 1.3rem;
        left: 0.5rem;
        bottom: 0;
    }

    .task_content{
        color: #666666;
        line-height: 1.2rem;
        white-space: pre-wrap;
    }
    .content_box .btn_a{
        font-size: 0.9rem;
        color: #FF5C5D;
        text-align: center;
        display: table;
        margin: 1rem auto 0;
        padding-bottom: 0.2rem;
        border-bottom: 1px solid;
        font-weight: 400;
    }
    .task_content p {
        margin-bottom: 0.7rem;
        line-height: 1.1rem;
        text-align: justify;
    }

    .task_content a {
        display: block;
        text-decoration: none;
        padding: 0.3rem 0;
        width: 40%;
        border-radius: 1rem;
        text-align: center;
        background: linear-gradient(to right, #FF7C5B , #FF595E) !important;
        color: #fff;
        margin: 0 auto;
    }

    .input_box input {
        width: 90%;
        height: 1.7rem;
        box-sizing: border-box;
        padding: 0 0.5rem;
    }

    .img_text {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
    }

    .show_img {
        margin: 0.5rem 0;
        width: calc(45% - 0.4rem);
    }

    .show_img:nth-child(2n) {
        margin-left: 0.8rem;
    }

    .show_img div {
        position: relative;
        width: 100%;
        height: 12rem;
        /*border: 1px solid rgb(191, 187, 187);*/
        overflow: hidden;
        border-radius: 0.5rem;
    }

    .show_img img {
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translateY(-50%);
        max-height: 100%;
    }

    .show_img p {
        margin-top: 0.5rem;
        text-align: center;
    }

    .get_task {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.5rem 0;
        background: rgba(255,255,255,0.9);
        /*background: #fff;*/
        z-index: 2;
        /*border-top: 0.2rem solid #F5F5F5;*/
    }

    .get_task div {
        text-align: center;
    }

    .get_task div span {
        display: inline-block;
        padding: 0 0.7rem;
        border-radius: 1rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        background: linear-gradient(to right, #FF7C5B , #FF595E);
        color: #fff;
        font-size: 0.8rem;
        margin-left: 0.4rem;
    }

    .get_task div span:first-child {
        margin-left: 0;
    }

    .get_task div .all {
        width: 90%;
        padding: 0;
        margin: 0 auto;
    }

    .get_task .btn_renounce{
        background: #CCC;
        color: #666;
        font-weight: 400;
    }

    .mask{
        position: fixed;
        width: 100%;
        height: 110vh;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.5);
        z-index: 4;
    }

    .mess_com{
        width: 16rem;
        height: fit-content;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        z-index: 5;
    }

    .message_box{
        padding: 1.5rem 1rem 1rem;
        background: #fff;
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        overflow: hidden;
        text-align: center;
    }

    .message_box h3{
        font-size: 1rem;
        font-weight: 600;
    }

    .message_box label {
        font-size: 0.9rem;
        font-weight: 400;
        color: #666666;
        line-height: 1.3rem;
        display: inline-block;
        padding: 1rem 0;
    }


    .btn_box{
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 2rem;
        font-size: 0.7rem;
        margin-top: 1.5rem;
    }
    .btn_box span{
        display: inline-block;
        padding: 0.5rem 1.8rem;
        text-align: center;
    }
    .btn_box .minus {
        color: #999;
        border: 0.05rem solid rgba(153,153,153,0.5);
        border-radius: 2rem;
        line-height: 1rem;
    }

    .btn_box .just{
        color: #fff;
        background: linear-gradient(to right, #FF7C5B , #FF595E);
        border-radius: 2rem;
        line-height: 1rem;
    }

    .fillet_img{
        width: 100%;
        display: block;
        margin-top: -0.018rem;
    }


    .ad_box{
        padding: 1rem;
        background: #fff;
        border-bottom-left-radius: 0.5rem;
        border-bottom-right-radius: 0.5rem;
        overflow: hidden;
        text-align: center;
    }
    .ad_box .ad{
        height: 5rem;
        background: #ccc;
    }

    .middle_qq img{
        display: inline;
        width: 6.5rem;
    }
    .message_box .go{
        color: #42B6FF;
        font-size: 0.8rem;
        text-decoration:underline;
    }
    .message_box .go::before {
        content: '';
        background: url(/image/jietu/click.png);
        background-size: 100%;
        background-repeat: no-repeat;
        width: 1rem;
        height: 1rem;
        display: inline-block;
        position: absolute;
        margin-left: -1.2rem;
    }

    .copy_btn {
        display: inline-block;
        border-radius: 0.2rem;
        width: 3.5rem;
        height: 1.6rem;
        line-height: 1.6rem;
        text-align: center;
        background: #52A2BD;
        color: #fff;
        font-size: 0.8rem;
        margin-left: 0.5rem;
    }
    .copy_operate {
        display: flex;
        align-items: center;
    }
    .scroll_box{
        padding: 0.5rem;
        border-radius: 0.3rem;
        border: 0.02rem dashed #ccc;
        background: #f4f4f4;
        color: #999;
        word-break: break-word;
        line-height: 1.1rem;
        letter-spacing: 0.03rem;
        width: 10.5rem;
        font-weight: 400;
        height: 3.2rem;
        overflow: auto;
        font-size: 0.65rem;
    }


    .copy_operate{
        display: flex;
        align-items: center;
    }

    .scroll_box{
        padding: 0.5rem;
        border-radius: 0.3rem;
        border: 0.02rem dashed #ccc;
        background: #f4f4f4;
        color: #999;
        word-break: break-word;
        line-height: 1.1rem;
        letter-spacing: 0.03rem;
        max-width: 10.5rem;
        font-weight: 400;
        max-height: 3.2rem;
        overflow: auto;
    }
    .copy_btn{
        padding: 0.4rem 0.5rem;
        background: linear-gradient(to right, #FF7C5B , #FF595E);
        margin-left: 0.5rem;
        font-size: 0.7rem;
        color: #fff;
        border-radius: 0.4rem;
    }


    .share_box{
        display: flex;
        justify-content: space-around;
    }
    .share_item{
        width: 4rem;
        display: block;
        margin-bottom: 1rem;
    }
    .share_item img{
        width: 100%;
    }
    .share_item p{
        margin: 0;
        line-height: 20px;
        font-size: 0.65rem;
        font-weight: 600;
        color: #696969;
    }
    .cancel{
        color: #333333;
        font-weight: 600;
        font-size: 0.65rem;
        border-top: 0.1rem solid #EDEDEF;
        padding-top: 0.5rem;
    }

</style>
<body>
<div id="detail" v-cloak>
    <div v-cloak><!--:class="{'task_list':task.record.status!=='CheckSuccess'}"-->
        <div style="padding: 0.8rem 0.8rem 0.6rem 0.8rem;position: relative">
            <div class="task_box">
                <div class="last_num">
                    <img :src="task.detail.icon">
                    <div>
                        <p class="title">{{task.detail.title}}</p>
                        <p class="describe">剩余<i>{{task.detail.amount}}</i>份</p>
                    </div>
                </div>
                <#--                 <span class="get_money">+999金币</span>-->
                <div style="text-align: right;width: 6.5rem;">
                    <span v-if="task.type>0" class="get_money">+{{task.userMoney}}金币</span>
                    <span v-else class="get_money">+{{task.userMoney/100}}元</span>
                    <#--                    <div class="btn_enroll">立即报名</div>-->
                    <div class="apply" v-if="task.record.status==='None'&&!shifang" @click="recieveTask">
                        <span class="btn_enroll" :class="{'all':task.record.status==='None'}">立即报名</span>
                    </div>
                </div>
                <div class="pass_detail">
                    <div v-if="task.record.status==='WaitCheckout'&&!cuishen">
                        <img src="${ctx}/image/jietu/wait.png">
                    </div>
                    <div v-if="task.record.status==='WaitSumbit'&&!shifang">
                        <img src="${ctx}/image/jietu/await.png">
                    </div>
                    <div v-if="task.record.status==='CheckFailure'&&task.redoStatus===1 && task.number !=0&&task.redo !=0">
                        <img src="${ctx}/image/jietu/files.png">
                    </div>
                    <div v-if="task.record.status==='CheckSuccess'">
                        <img src="${ctx}/image/jietu/success.png">
                    </div>
                    <div v-if="task.record.status==='CheckFailure'&&task.redoStatus ===0" >
                        <img src="${ctx}/image/jietu/not.png">
                    </div>
                    <div v-if="task.record.status==='CheckFailure'&&task.redoStatus===1&&task.number ===0" >
                        <img src="${ctx}/image/jietu/not.png">
                    </div>
                    <div v-if="task.record.status==='WaitSumbit'&&shifang&&task.redoStatus===1&&task.redocount >=1&&task.isTime === 1" >
                        <img src="${ctx}/image/jietu/not.png">
                    </div>
                    <#--                    <div v-if="task.record.status==='CheckFailure'&&shifang&&task.redoStatus===1&&task.redocount ===1" >-->
                    <#--                        <img src="${ctx}/image/jietu/not.png">-->
                    <#--                    </div>-->
                </div>
            </div>
        </div>

        <div class="task_time" ><!--:class="{'show_border':task.record.status==='CheckFailure'}"-->
            <div class="time_box">
                <div>
                    <span class="item">{{task.taskTime}}分钟</span>
                    <p>任务时间</p>
                </div>
                <div>
                    <span class="item">{{task.auditTime|auditTime}}</span>
                    <p>审核时间</p>
                </div>
                <div>
                    <span class="item">及时到账</span>
                    <p>任务保障</p>
                </div>
            </div>
        </div>
        <div class="task_step">
            <div class="tip">
                <span>任务步骤<label>只需{{task.detail.contents.length}}步就完成</label></span>
            </div>
            <template v-if="task.record.status ==='None'||task.record.status ==='WaitSumbit'|| task.redocount >=1">
                <div v-for="(item,index) in task.detail.contents" class="content_box">
                    <div class="step_num">
                        <i>{{index+1}}</i>
                        <span></span>
                    </div>
                    <div style="padding-top: 0.2rem;width: 100%">
                        <div v-html="item.text" class="task_content" @click="getUrl"></div>
                        <div class="img_text" v-if="item.type === 'image'&&item.image">
                            <div class="show_img" @click="openBigImage(item.image.image)">
                                <div>
                                    <img :src="item.image.image">
                                </div>
                                <p>{{item.image.title}}</p>
                            </div>
                            <div class="show_img" @click="uploadImage(index)">
                                <div>
                                    <img v-if="task.record.result===''" src="${ctx}/image/upload.png"
                                         :id="'img'+index"/>
                                    <img v-else :src="item.image.resultImage" :id="'img'+index" class="up_img">
                                </div>
                                <p>我的传图</p>
                            </div>
                        </div>
                        <div class="img_text" v-if="item.type === 'imagenoup'&&item.imagelist">
                            <div class="show_img" v-for="(list,index) in item.imagelist"
                                 @click="openBigImage(list.image)">
                                <div>
                                    <img :src="list.image">
                                </div>
                                <p>{{list.title}}</p>
                            </div>
                        </div>
                        <div class="input_box" v-if="item.type === 'input'">
                            <input type="text" v-model="item.resultInput">
                        </div>
                    </div>
                </div>
            </template>
            <#--<p class="tip">提交过任务的任务步骤</p>-->
            <template v-else>
                <div v-for="(item,index) in task.memberResult" class="content_box">
                    <div class="step_num">
                        <i>{{index+1}}</i>
                        <span></span>
                    </div>
                    <div style="padding-top: 0.2rem;width: 100%">
                        <div v-html="item.text" class="task_content" @click="getUrl"></div>
                        <div class="img_text" v-if="item.type === 'image'&&item.image">
                            <div class="show_img" @click="openBigImage(item.image.image)">
                                <div>
                                    <img :src="item.image.image">
                                </div>
                                <p>{{item.image.title}}</p>
                            </div>
                            <div class="show_img" @click="openBigImage(item.resultImage.image)">
                                <div>
                                    <img v-if="task.record.result===''" src="${ctx}/image/upload.png" :id="'img'+index"
                                         style="height: 14rem;top: 1px;transform: translateY(0)"/>
                                    <img v-else :src="item.resultImage.image" :id="'img'+index">
                                </div>
                                <p>我的传图</p>
                            </div>

                        </div>
                        <div class="img_text" v-if="item.type === 'imagenoup'&&item.imagelist">
                            <div class="show_img" v-for="(list,index) in item.imagelist"
                                 @click="openBigImage(list.image)">
                                <div>
                                    <img :src="list.image">
                                </div>
                                <p>{{list.title}}</p>
                            </div>
                        </div>
                        <div class="input_box" v-if="item.type === 'input'">
                            <input type="text" v-model="item.resultInput"
                                   disabled="false" <#--@input="getInput(index)"-->>
                        </div>
                    </div>
                </div>
            </template>

            <div class="content_box" v-if="task.record.status !=='None'">
                <div class="step_num">
                    <i>{{task.detail.contents.length+1}}</i>
                    <span></span>
                </div>
                <div>
                    <p style="width: 100%;margin-bottom: 0.8rem;">点击复制评论内容：</p>
                    <div class="copy_operate">
                        <div class="scroll_box">
                            <div>{{detail.msg}}</div>
                        </div>
                        <span class="copy_btn" @click="copyText(detail.msg)">点击复制</span>
                    </div>

                </div>
            </div>

<#--           <div class="content_box" v-if="task.record.status !=='None'">
                <span class="line"></span>
                <p>点击复制评论内容：</p>
                <div class="copy_operate">
                    <div class="scroll_box">
                        <div>{{detail.msg}}</div>
                    </div>
                    <span class="copy_btn" @click="copyText(detail.msg)">复制</span>
                </div>

                <div class="img_text" v-if="detail.hasPicture">
                    <div class="show_img" v-for="(list,index) in detail.pictureList" @click="openBigImage(list)">
                        <div>
                            <img :src="list">
                        </div>
                        <p>{{list.title}}</p>
                    </div>
                </div>
            </div>-->

        </div>

        <div v-if="isShare">
            <div class="mask" @click="cancelShare()"></div>
            <div class="mess_com" style="top: auto;bottom:1rem;width: 96vw">
                <div class="message_box" style="border-radius:0.5rem">
                    <div class="share_box">
                        <div class="share_item" @click="shareQQ()">
                            <img src="${ctx}/image/jietu/share_qq.png">
                            <p>QQ好友</p>
                        </div>
                        <div class="share_item" @click="shareQZone()">
                            <img src="${ctx}/image/jietu/share_qzone.png">
                            <p>QQ空间</p>
                        </div>
                        <div class="share_item" @click="copyShare('wechatTimeline')">
                            <img src="${ctx}/image/jietu/share_copylink.png">
                            <p>复制链接</p>
                        </div>
                    </div>
                    <div class="cancel" @click="cancelShare()">取消</div>
                </div>
            </div>

        </div>

    </div>
    <div class="get_task">
        <#--            <div v-if="task.record.status==='None'&&!hide" @click="recieveTask">-->
        <#--                <span :class="{'all':task.record.status==='None'}">领取任务</span>-->
        <#--            </div>-->
        <div v-if="task.record.status==='WaitSumbit'&&!shifang">
            <span @click="giveUpDialog">放弃任务</span>
            <span @click="commitTask">提交任务（{{time.minute}}分{{time.second}}秒后过期）</span>
        </div>
        <#--        <div v-if="task.record.status==='CheckFailure'&&task.record.redo === '0'" @click="recieveTask">-->
        <#--            <span :class="{'all':task.record.status==='CheckFailure'}">重做任务</span>-->
        <#--        </div>-->
        <div v-if="task.record.status==='WaitCheckout'&&!cuishen">
            <span class="all">{{checkTime.hours}}:{{checkTime.minute}}:{{checkTime.second}}等待审核</span>
        </div>
        <div v-if="cuishen" @click="cuishen1">
            <span class="all">审核时间已到，领取奖励！</span>
        </div>
        <div v-if="task.record.status==='CheckFailure'&&task.redoStatus===1&&task.number!=0" @click="redo">
            <span class="all">重做该任务</span>
        </div>
        <div v-if="shifang">
            <span class="all">超时未提交,任务已释放!</span>
        </div>
    </div>

</div>
</body>
</html>
<script>
    var nativeShare = new NativeShare();
    var app = new Vue({
        el: '#detail',
        data: {
            task: {},
            ids: '',
            types: '',
            time: {
                minute: 0,
                second: 0
            },
            checkTime: {
                hours: 0,
                minute: 0,
                second: 0
            },
            hide: false,
            dialogType: 0,
            toId: '',
            toType: '',
            upIndex: '',
            contents: [],
            upImg: '',
            input_text: '',
            inputIndex: '',
            detail: {},
            cuishen: false,
            shifang: false,
            isShare:false
        },
        mounted: function () {
            //安卓绑定展示分享界面
            window.showShare = this.showShare;
            window.goRecordList = this.goRecordList;
            window.xy_web.dismissLoading();
            window.leftButton = this.leftButton;
            window.rightButton = this.rightButton;
            window.finishUpload = this.finishUpload;
            window.refreshList = this.refreshList;
            this.ids = '${taskId}';
            this.types = '${type}';
            this.getDetail();
            window.leaveTaskDetail=this.leaveTaskDetail;
            window.recieveTask=this.recieveTask;
            window.xy_web.isTaskDetail("1");
            if(this.task.record.status==='None'&&!this.hide){
                window.xy_web.isSingUp("1");
            }else{
                window.xy_web.isSingUp("0");
            }
            window.xy_web.showAndHideTitleBar(true);  //显示标题栏
            window.xy_web.setActivityTitle('任务详情');
            window.xy_web.showAndHideRecord(false);
        },
        methods: {
            getDetail: function () {
                var that = this;
                var res = that.ajax("/task/" + that.types.toLowerCase() + "/" + that.ids, "", 'get');
                if (res.success) {
                    that.task = res.data.data;
                    that.contents = res.data.data.detail.contents;
                    for (var i = 0; i < that.contents.length; i++) {
                        if (that.contents[i].type === 'image') {
                            that.contents[i].resultImage = 'none';
                            var obj = '#img' + i;
                            $(obj).attr("src", '${ctx}/image/upload.png');
                        }
                        if (that.contents[i].type === 'input') {
                            that.contents[i].resultInput = '';
                        }
                    }
                    console.log('success', that.task)
                    if (this.task.record.status === 'WaitSumbit') {
                        that.detail = res.data.detail;
                        this.downCount(this.task.record.endTime);
                    }
                    if (this.task.record.status === 'WaitCheckout') {
                        this.downCount(new Date(this.task.record.submitTime).getTime() + this.task.auditTime * 60 * 1000);

                    }

                    if(this.task.record.status==='None'&&!this.hide){
                        window.xy_web.isSingUp("1");
                    }else{
                        window.xy_web.isSingUp("0");
                    }

                } else {
                    console.log('fail')
                }
                window.xy_web.closeRefresh();
            },
            //领取任务
            recieveTask: function () {
                var that = this;
                var res = that.ajax("/pull/" + that.types.toLowerCase() + "/" + that.ids, "", 'post');
                if (res.success) {
                    // layer.msg(res.message);
                    window.xy_web.showToast(res.message);
                    that.getDetail();
                    window.xy_web.isSingUp("0");
                } else {
                    if (res.status === '800') {
                        that.dialogType = 2;
                        that.toId = res.data.taskId;
                        that.toType = res.data.category;
                        /* window.xy_web.showDialog(2, '已领取过任务', res.message, '继续领取', '回原任务')*/
                        that.typeIndex=1;
                        window.xy_web.showTipsDialog('您有一个未完成的任务','报名新任务,已报名任务将失效!',1,'我再看看','继续报名');
                    } else {
                        window.xy_web.showToast(res.message);
                    }
                    console.log('fail')
                }
            },
            //提交任务
            commitTask: function () {
                var that = this;
                var re = that.contents;
                for (var i = 0; i < that.contents.length; i++) {
                    if (that.contents[i].type === 'image') {
                        if (that.contents[i].resultImage === 'none') {
                            layer.msg('请上传截图')
                            return;
                        }
                    }
                    if (that.contents[i].type === 'input') {
                        if (that.contents[i].resultInput === '') {
                            layer.msg('请上传评论')
                            return;
                        }
                    }
                }

                var data = {result: JSON.stringify(re)};
                var res = that.ajax("/push/" + that.types.toLowerCase() + "/" + that.ids, data, 'post');
                that.showMsg(res);
                that.getDetail();
            },

            giveUpDialog: function () {
                this.dialogType = 3;
                /* window.xy_web.showDialog(3, '放弃任务', '您放弃当前任务奖励吗？', '狠心放弃', '继续任务')*/
                // $("#giveupBox").show();
                this.typeIndex=2;
                window.xy_web.showTipsDialog('名额有限','您确定放弃当前任务名额吗?',0,'确定放弃','继续任务');
            },

            giveUpTask: function () {
                console.log("2")
                // window.xy_web.openFloatWindow(0, "", "", "", "")
                var that = this;
                var res = that.ajax("/member/task/clean", "", 'post');
                if (res.success) {
                    console.log('success', res);
                    if (that.dialogType === 2) {
                        that.recieveTask();
                        //window.xy_web.openFloatWindow(0);
                    } else {
                        that.getDetail();
                    }
                } else {
                    console.log('fail')
                }
            },


            downCount: function (date) {
                var ti = new Date(date).getTime() - new Date().getTime();
                this.createCountDown(ti);
            },


            createCountDown: function (time) {
                var that = this;
                clearInterval(this.countDown);
                that.countDown = setInterval(function () {
                    that.setTimeFormat(time);
                    //时间到了暂停倒计时
                    if (time <= 0) {
                        if (that.task.record.status === 'WaitCheckout') {
                            that.cuishen = true;
                        }
                        if (that.task.record.status === 'WaitSumbit') {
                            that.shifang = true;
                        }
                        // that.getDetail();
                        clearInterval(that.countDown);
                    }
                    time -= 1000;
                }, 1000);
            },

            setTimeFormat: function (time) {
                var miao = time / 1000;
                if (this.task.record.status === 'WaitSumbit') {

                    var hour = parseInt(miao / 60);
                    var minute = parseInt(miao - (hour * 60));
                    this.time.minute = hour;
                    this.time.second = minute;
                }
                if (this.task.record.status === 'WaitCheckout') {
                    var xiaoshi = parseInt(miao / 60 / 60);
                    var minute = parseInt(miao / 60 - xiaoshi * 60);
                    var ah = parseInt(miao - (xiaoshi * 60 * 60) - (minute * 60));
                    this.checkTime.minute = minute;
                    this.checkTime.second = ah;
                    this.checkTime.hours = xiaoshi;
                }

            },

            openVideo: function () {
                var that = this;
                window.xy_web.playVideo(that.task.detail.media);
            },

            // 返回上一页
            comeback: function () {
                window.xy_web.closePage();
            },

            // 获取a标签href绑定点击事件
            getUrl: function (e) {
                e.preventDefault();
                if (e.target.nodeName === 'A') {
                    if (this.task.record.status === 'None') {
                        window.xy_web.showToast('请先报名')
                    } else {
                        var url = $(e.target).attr('href');
                        window.xy_web.commonLinkAction(url);
                    }
                }
            },

            uploadImage: function (index) {
                if (this.task.record.status === 'None') {
                    window.xy_web.showToast('请先报名')
                } else if (this.task.record.status === 'WaitSumbit') {
                    this.upIndex = index;
                    window.xy_web.showLoading();
                    window.xy_web.openAlbum();
                    window.xy_web.dismissLoading();
                } else {
                    this.openBigImage(this.contents[index].resultImage)
                }
            },

            finishUpload: function (e) {
                if (this.task.record.status !== 'WaitSumbit') {
                    layer.msg('只有待提交才能上传截图')
                }
                var that = this;
                console.log(e);
                var obj = '#img' + that.upIndex;
                $(obj).attr("src", e);
                var data = that.task.detail.contents;
                var img = data[this.upIndex].image;
                data[this.upIndex].resultImage = {
                    image: e,
                    title: img.title
                };
                this.contents = data;

            },

            // 获取输入框索引
            getInput: function (index) {
                this.inputIndex = index;
            },

            // 替换input值
            transformInput: function () {
                var data = this.contents;
                data[this.inputIndex] = {
                    input: '',
                    text: '',
                    type: 'input',
                    resultInput: this.input_text
                };
                data[this.inputIndex].resultInput = this.input_text;
                this.contents = data;
            },

            openBigImage: function (url) {
                console.log('open', url)
                window.xy_web.showBigImage(url);
            },

            leftButton: function (e) {
                console.log("12")
                if (this.dialogType === 3) {
                    console.log("1")
                    this.giveUpTask()
                    console.log("1")
                }
            },

            rightButton: function (e) {
                if (this.dialogType === 2) {
                    this.giveUpTask()
                }
            },
            ajax: function (url, data, type) {
                var header = window.xy_web.getNetHeader();
                window.xy_web.showLoading();
                var i;
                $.ajax({
                    url: url,
                    type: type,
                    async: false,
                    data: data,
                    headers: JSON.parse(header),
                    //headers:{"appStore":"test","appid":"xianyu","brand":"test","imei":"863254030974322","lat":"","lng":"","macAddr":"C4:0B:CB:F2:C7:18","os":"Othernull","osv":"MI 6","sign":"7e058d5d632eaf9e75de4a687f12fdfd","time":"1565253309935","userid":"9c7c6d56-ad82-482c-a087-5f9560412303","version":"100"},

                    dataType: "json",
                    success: function (res) {
                        window.xy_web.dismissLoading();
                        i = res;

                    },
                    error: function () {
                        window.xy_web.dismissLoading();
                    }
                });
                return i;

            },
            showMsg: function (res) {
                var that = this;
                if (res.success) {
                    layer.msg(res.message);
                    that.getDetail();
                } else {
                    layer.msg(res.message);
                    console.log('fail')
                }
            },
            // 刷新数据
            refreshList: function () {
                var that = this;
                that.getDetail();
                <#--var obj = '#img' + that.upIndex;-->
                <#--$(obj).attr("src", '${ctx}/image/upload.png');-->
                window.xy_web.closeRefresh();
            },
            cuishen1: function () {
                var that = this;
                var res = that.ajax("/" + that.types.toLowerCase() + "/task", {taskid: that.ids}, 'post');
                that.showMsg(res);
            },
            redo: function () {
                var that = this;
                var res = that.ajax("/" + that.types.toLowerCase() + "/redo", {taskid: that.ids}, 'post');
                that.showMsg(res);
            },
            // 复制内容
            copyText: function (data) {
                window.xy_web.copyString(data);
                layer.msg('复制成功！');
            },
            //安装app市场方法
            installAppStore: function () {
                var that = this;

                window.xy_web.downloadAndInstallApk("sb", that.task.detail.storeAddress);
            },
            Uninstall: function () {
                var that = this;

                window.xy_web.uninstallApk(that.task.detail.packagename);
            },
            //是否是详情页
            getPaDetail:function () {
                return this.isDetail;
            },
            leaveTaskDetail: function(){
                window.xy_web.isTaskDetail("0");
            },
            continueTask: function(){
                $("#giveupBox").hide();
            },
            sureGiveUp: function(){
                // $("#giveupBox").hide();
                if (this.dialogType === 2 || this.dialogType === 3) {
                    this.getDetail();
                    this.giveUpTask();
                }

            },
            // 前往任务记录列表
            goRecordList: function () {
                var storage = window.sessionStorage;
                storage.removeItem("category");
                window.location.href = "/webapi/newweb/task/history";
            },
            failRepick: function(){
                $("#repickBox").hide();
            },
            continueReceiveTask: function () {
                // $("#repickBox").hide();
                if (this.dialogType === 2 || this.dialogType === 3) {
                    this.giveUpTask();
                }

            },
            failRedo: function(){
                $("#redoTipBox").hide();
            },
            continueRedo: function(){
                var that = this;
                $("#redoTipBox").hide();
                var res = that.ajax("/" + that.types.toLowerCase() + "/redo", {taskid: that.ids}, 'post');
                that.showMsg(res);
            },
            getHref(qq){
                if(this.isEmpty(qq)){
                    window.xy_web.showToast('该客服QQ未在线，请到我的页面联系其他客服');
                }else{
                    window.xy_web.openQQ(qq);
                }
                // return 'http://wpa.qq.com/msgrd?v=3&uin='+qq+'&site=qq&menu=yes';
            },
            //判断字符是否为空的方法
            isEmpty(obj){
                if(typeof obj == "undefined" || obj == null || obj == ""){
                    return true;
                }else{
                    return false;
                }
            },
            initiateShare: function (type){
                var introduce = "";
                if(this.task.shareIntroduce){
                    introduce=this.task.shareIntroduce;
                }
                let shareData = {
                    title: this.task.detail.title,//分享标题
                    desc: introduce,//描述
                    link: '${shareUrl}/webapi/newweb/task/share/'+this.ids,//分享的url链接
                    icon: this.task.detail.icon,
                    success: function() {
                        console.log('success')
                    },
                    fail: function() {
                        console.log('fail')
                    }
                };
                nativeShare.setShareData(shareData);
                nativeShare.call(type)
            },
            showShare: function () {
            this.isShare = true;
                window.xy_web.isShowTitleBlackBg("1");
        },
            copyShare: function(value) {
                const input = document.createElement('input');
                document.body.appendChild(input);
                input.setAttribute('value', '${shareUrl}/webapi/newweb/task/share/'+this.ids);
                input.select();
                document.execCommand('copy');
                input.remove()
                this.isShare=false;
                window.xy_web.isShowTitleBlackBg("0");
                window.xy_web.showToast('复制成功');
            },
            cancelShare: function(){
                this.isShare=false;
                window.xy_web.isShowTitleBlackBg("0");
            },
            shareQQ: function(){
                var introduce = "";
                if(this.task.shareIntroduce){
                    introduce=this.task.shareIntroduce;
                }
                window.xy_web.shareToQQ('${shareUrl}/webapi/newweb/task/share/'+this.ids,this.task.detail.title,introduce,"1");
            },
            shareQZone: function(){
                var introduce = "";
                if(this.task.shareIntroduce){
                    introduce=this.task.shareIntroduce;
                }
                window.xy_web.shareToQQ('${shareUrl}/webapi/newweb/task/share/'+this.ids,this.task.detail.title,introduce,"2");
            }

        }
    })
    Vue.filter('auditTime', function (value) {
        var str;
        if (value <= 1440) {
            str = "一日内";
        }
        if (value <= 4320&&value>1440) {
            str = "三日内";
        }
        if (value > 4320) {
            str = "三日后";
        }
        return str;

    })
</script>